<template>
  <div class="header">
    <div class="header-top">
      <a-form layout="inline" :model="searchParams" class="ant-advanced-search-form">
        <a-form-item label="类型">
          <a-select
            v-model:value="searchParams.type"
            style="width: 200px"
            placeholder="请选择类型"
            allow-clear
            :field-names="{ label: 'text', value: 'value' }"
            :options="blacklistType"
          ></a-select>
        </a-form-item>

        <a-form-item label="粉丝昵称">
          <a-input v-model:value="searchParams.fansNickName" placeholder="请输入粉丝昵称" />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="header-bottom">
      <a-table
        :columns="columns"
        :data-source="dataList"
        :loading="loading"
        :pagination="pagination"
            @change="changePage"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'fansAvatar'">
            <a-image :width="60" :src="record.fansAvatar" />
          </template>

          <template v-if="column.dataIndex === 'type'">
            <div>
              {{ blacklistType.find(item => item.value === record.type)?.text }}
            </div>
          </template>

          <template v-if="column.dataIndex === 'auditTime'">
            <div>
              {{ dayjs(Number(record.auditTime)).format('YYYY-MM-DD HH:mm:ss') }}
            </div>
          </template>

          <template v-if="column.key === 'operation'">
            <a-popconfirm
              title="确定要删除吗?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="getDelete(record)"
            >
              <a-button type="text" :loading="record.loading" style="color: #dc362e">删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, h } from 'vue'
import { fansBlacklistList, deleteFansBlacklist } from '@/api/black'
import dayjs from 'dayjs'
import Config from '@/settings'
import { SearchOutlined } from '@ant-design/icons-vue'
import { getIsHint } from '@/utils/validate'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

const loading = ref(false)

const blacklistType = Config.data.blackType

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
  showQuickJumper: boolean
}

const handlePageChange = (page: any, pageSize: any) => {
  // console.log(page, pageSize)
  // pagination.value.page = page
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize
  searchParams.value.currentPage = pagination.value.current as number
  shows()
}
// 分页配置
const pagination = ref<Pagination>({
  page: 1, // 页数
  pageSize: 10, // 每页显示的条数
  total: 0,
  onChange: handlePageChange,
  showSizeChanger: true,
  showQuickJumper: true,
})

interface SearchParams {
  currentPage: number
  pageSize: number
  type?: string | null
  fansNickName?: string | null
}
const searchParams = ref<SearchParams>({
  type: null, // 类型
  fansNickName: '', // 粉丝昵称
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})

const columns = [
  {
    title: '头像',
    dataIndex: 'fansAvatar',
    key: 'fansAvatar',
    width: 100,
  },
  {
    title: '昵称',
    dataIndex: 'fansNickName',
    key: 'fansNickName',
    width: 160,
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    ellipsis: true,
    width: 160,
  },
  {
    title: '原因',
    dataIndex: 'description',
    key: 'description',
    ellipsis: true,
  },
  {
    title: '审核时间',
    dataIndex: 'auditTime',
    key: 'auditTime',
    ellipsis: true,
    width: 180,
  },
] as any

const dataList = ref([])

onMounted(() => {
  if (userStore.userInfo.role === 'ADMIN') {
    columns.push({
      title: '操作',
      width: 100,
      key: 'operation',
      fixed: 'right',
    })
  }

  shows()
})

const shows = async () => {
  loading.value = true

  try {
    const { data, state } = await fansBlacklistList({
      ...searchParams.value,
    })

    loading.value = false

    if (state === 200) {
      dataList.value = data.list
      pagination.value.total = data.totalCount
    }
  } catch (e) {
    loading.value = false
  }
}

// 点击删除
const getDelete = async (val: any) => {
  val.loading = true
  try {
    const { state, message } = await deleteFansBlacklist({ id: val.id })

    delete val.loading
    if (state === 200) {
      getIsHint('success', '删除成功~')

      shows()
    } else {
      getIsHint('error', message)
    }
  } catch (e) {
    delete val.loading
    getIsHint('error', '删除失败~')
  }
}

// 点击查询
const search = () => {
  shows()
}
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  min-height: 700px;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  .header-top {
    width: 95%;
    margin-top: 20px;
  }

  .header-bottom {
    margin: 20px 0;
    width: 95%;
  }
}
</style>
